<template>
  <div class="content-box">
    <heading grade="1">{{title}}</heading>
    <div class="curriculum_show">
      <el-row class="title">
        <el-col :span="3">课程名称：</el-col>
        <el-col :span="21">
          {{currilumName}}
          <span class="state" v-if="$route.query.state == 0">[草稿]</span>
          <span class="state" v-if="$route.query.state == 1">[审核中]</span>
          <span class="state" v-if="$route.query.state == 2">[审核不通过]</span>
          <span class="state" v-if="$route.query.state == 3">[审核通过]</span>
          <span class="state" v-if="$route.query.state == 4">[仓库中]</span>
          <span class="state" v-if="$route.query.state == 5">[进行中]</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" class="text_center">校 区：</el-col>
        <el-col :span="21">
          <p v-if="campusList.length == 0" class="no_select">请在校区管理添加校区</p>
          <el-radio-group  v-model="radioCampus" class="checker-plain" @change="handleSelectCampus"> 
            <el-radio v-for="item in campusList" :key="item.schoolId" :label="item.schoolId" >{{item.schoolName}}</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" class="text_center">班 别：</el-col>
        <el-col :span="21">
          <p v-if="!radioCampus" class="no_select">请选择校区</p>
          <p v-if="classList.length == 0 && radioCampus" class="no_select">暂无班别数据</p>
          <el-radio-group v-model="radioClass" class="checker-plain" v-else @change="handleSelectClass">
            <el-radio v-for="item in classList" :key="item.classLevelId" :label="item.classLevelId">{{item.classLevelName}}</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" class="text_center">上课时间：</el-col>
        <el-col :span="21">
          <p v-if="!radioClass" class="no_select">请选择班别</p>
          <p v-if="timeList.length == 0 && radioClass" class="no_select">暂无时间数据</p>
          <el-radio-group v-model="radioTime" class="checker-plain" v-else @change="handleSelectTime">
            <el-radio v-for="item in timeList" :key="item" :label="item">{{item}}</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" class="text_center"></el-col>
        <el-col :span="21">
          <div class="class_list">
            <p v-if="!radioTime" class="no_select">请选择上课时间</p>
            <p v-if="gradeList.length == 0 && radioTime" class="no_select">暂无班级数据</p>
            <el-radio-group v-model="radioGrade" v-else @change="handleSelectGrade">
              <el-radio v-for="item in gradeList" :key="item.classId" :label="item.classId">{{item.beginTime | FormatDate('yyyy.MM.dd')}} - {{item.endTime | FormatDate('yyyy.MM.dd')}}({{item.className}})</el-radio>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <transition name="fade">
        <div class="grade_show" v-if="radioGrade">
          <el-row>
            <el-col :span="3">班 级：</el-col>
            <el-col :span="21">{{gradeShow.beginTime | FormatDate('yyyy.MM.dd')}} - {{gradeShow.endTime | FormatDate('yyyy.MM.dd')}}({{gradeShow.className}})</el-col>
          </el-row>
          <el-row>
            <el-col :span="3">课 时：</el-col>
            <el-col :span="21">{{gradeShow.lessonCount}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3">班级人数：</el-col>
            <el-col :span="21">{{gradeShow.studentCount}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3">开课状态：</el-col>
            <el-col :span="21">
              <span v-if="gradeShow.startStatus == 0">未开课</span>
              <span v-if="gradeShow.startStatus == 1">已开课</span>
              <span v-if="gradeShow.startStatus == 2">已结束</span>
            </el-col>
          </el-row>
          <el-row v-if="$route.query.classtype == 0">
            <el-col :span="3">教 练：</el-col>
            <el-col :span="21">{{gradeShow.teacherName}}</el-col>
          </el-row>
          <el-row v-if="$route.query.classtype == 0">
            <el-col :span="3">上课周期：</el-col>
            <el-col :span="21">
              <el-row v-for="item in gradeShow.courseCycleLis" :key="item.id" style="line-height:1.3;">
                <el-col :span="4">{{item.weekCode | getWeekDay}}</el-col>
                <el-col :span="6">{{item.beginTime | FormatDate('HH:mm')}}-{{item.endTime | FormatDate('HH:mm')}}</el-col>
                <el-col :span="12">{{item.address}}</el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col :span="3">上课周期：</el-col>
            <el-col :span="21">
              <el-row  v-for="item in gradeShow.courseCycleLis" :key="item.id" style="line-height:1.3;">
                <el-col :span="2">{{item.weekCode | getWeekDay}}</el-col>
                <el-col :span="5">{{item.subjectName}}</el-col>
                <el-col :span="5">{{item.beginTime | FormatDate('HH:mm')}}-{{item.endTime | FormatDate('HH:mm')}}</el-col>
                <el-col :span="6">{{item.address}}</el-col>
                <el-col :span="6">{{item.teacherName}}</el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <router-link :to="{path: '/training/class/detail', query: {id: gradeShow.classId, crruid: crruid}}" tag="a" class="alink_color">查看该班详情</router-link>
            </el-col>
          </el-row>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import trainApi from 'api/train'
export default {
  created () {
    trainApi.trainCourseDetail({ // 查询课程详情&校区
      courseId: this.$route.query.id
    }).then((res) => {
      this.crruid = res.data.courseId
      this.currilumName = res.data.courseName
      this.campusList = res.data.saleCorreList
    }).catch(() => {
      return false
    })
  },
  data () {
    return {
      title: '课程详情',
      crruid: '',
      currilumName: '',
      radioCampus: '',
      campusList: [],
      radioClass: '',
      classList: [],
      radioTime: '',
      timeList: [],
      radioGrade: '',
      gradeList: [],
      gradeShow: {}
    }
  },
  methods: {
    handleSelectCampus () { // 选择校区，查询班别
      this.radioClass = ''
      this.radioTime = ''
      this.radioGrade = ''
      trainApi.listTrainClassLevelInfo({
        courseId: this.$route.query.id,
        schoolId: this.radioCampus
      }).then((res) => {
        this.classList = res.data.saleCorrelationVO
      }).catch(() => {
        return false
      })
    },
    handleSelectClass () { // 选择班别，查询上课时间段
      this.radioTime = ''
      this.radioGrade = ''
      this.gradeList = []
      trainApi.listStartClassTimeInfo({
        courseId: this.$route.query.id,
        schoolId: this.radioCampus,
        classLevelId: this.radioClass
      }).then((res) => {
        this.timeList = res.data
      }).catch(() => {
        return false
      })
    },
    handleSelectTime () { // 选择上课时间，查询班级列表
      this.radioGrade = ''
      if (this.radioTime) {
        trainApi.listTrainClassInfo({
          courseId: this.$route.query.id,
          schoolId: this.radioCampus,
          classLevelId: this.radioClass,
          courseTimeRegion: this.radioTime
        }).then((res) => {
          this.gradeList = res.data
        }).catch(() => {
          return false
        })
      }
    },
    handleSelectGrade () { // 选择班级，查询班级详情
      if (this.radioGrade) {
        trainApi.trainClassInfo({
          classId: this.radioGrade
        }).then((res) => {
          this.gradeShow = res.data
        }).catch(() => {
          return false
        })
      }
    }
  }
}
</script>
<style lang="scss">
.curriculum_show{
  border-top:1px solid #efefef;
  padding-top: 20px;
  .el-col{
    margin: 6px 0;
  }
  .text_center{
    line-height:36px;
    text-align:center;
  }
  .title{
    font-size: 16px;
    margin-bottom:15px;
  }
  .no_select{
    color:#999;
    line-height:36px;
  }
  .state{
    color:#d95814;
  }
  .checker-plain.el-radio-group{
    margin:0;
  }
  .class_list{
    border:1px solid #efefef;
    padding: 15px 25px;
    .el-radio-group .el-radio{
      width:322px;
      margin:10px 0;
      color:#999;
    }
  }
  .grade_show{
    margin-top:45px;
    background: #f5f5f5;
    padding: 35px 35px 17px 35px;
    .el-col{
      margin:0 0 18px 0;
    }
    .alink_color{
      color:#2a82ee;
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
}
</style>
